<template>
  <div>
    文章管理
    <div v-for="item in list" :key="item.id">
      <span>是否公开:<input type="checkbox" :checked="item.status" /></span><br />
      <span>标题:{{ item.title }}</span
      ><br />
      <span>内容:{{ item.content }}</span
      ><br />
      <button @click="DelList(item.id)">删除</button
      ><button @click="EditArticle(item)">编辑</button>
    </div>

    <!-- 修改列表 -->
    <div v-show="ShowForm">
      文章标题<input type="text" v-model="EditObj.title" /> 是否公开<input
        type="checkbox"
        v-model="EditObj.status"
      />
      内容<input type="text" name="" id="" v-model="EditObj.content" />
      <button @click="EditOk()">保存</button><button @click="ShowForm = false">取消</button>
    </div>
  </div>
</template>
<script setup>
import { CheckReq, DelReq, EditReq } from '@/api/Requst'
import { onMounted } from 'vue'
import { ref } from 'vue'
let list = ref([])
let ShowForm = ref(false)
let EditObj = ref({})

onMounted(() => {
  LoadList() // 初始化获取文章列表
}) //获取文章列表
function LoadList() {
  CheckReq().then((res) => {
    // console.log(res)
    list.value = res.data
    console.log(list.value)
  })
}

//删除文章
function DelList(id) {
  DelReq(id).then((res) => {
    console.log(res)
    LoadList()
  })
}

//编辑文章
function EditArticle(item) {
  ShowForm.value = true
  EditObj.value = { ...item }
  console.log(EditObj.value)
}

function EditOk() {
  EditReq(EditObj.value.id, EditObj.value.title, EditObj.value.content, EditObj.value.status).then(
    (res) => {
      console.log(res)
      LoadList()
      ShowForm.value = false
    }
  )
}
</script>
<style></style>
